<template>
  <div class="home">
    <!-- 背景图片 -->
    <div class="background">
      <span class="wz">易洁家政</span>
    </div>
    <!-- 轮播图 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="swipe in swipeData" :key="swipe.id">
          <img :src="swipe.url" alt="" style="height: 210px; width: 100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 栏目展示 -->
    <div class="category">
      <van-grid column-num="3">
        <van-grid-item
          icon="cash-on-deliver"
          text="订单"
          color="#1989fa"
          to="/manager/order"
        />
        <van-grid-item icon="phone-circle" text="收益" to="/manager/profit" />
        <van-grid-item icon="manager" text="我的" to="/manager/mine" />
      </van-grid>
    </div>
    <!-- 我的订单 -->
    <div class="order">
      <van-nav-bar title="我的订单" />
      <van-card
        v-for="order in orderData"
        :key="order.id"
        :price="order.total"
        :desc="
          order.address.province +
          order.address.city +
          order.address.area +
          order.address.address
        "
        :title="order.customer.username"
        @click="toOrderDeatils(order.id)"
      >
        <template #thumb>
          <van-image
            round
            width="5.5rem"
            height="5.5rem"
            :src="order.customer.userFace"
          />
        </template>
        <template #tags>
          <span>{{ order.orderTime | fmtDate_global }}</span>
        </template>
        <template #footer>
          <van-tag type="primary" size="large" v-if="order.status == '待服务'"
            >待服务</van-tag
          >
          <van-tag type="primary" size="large" color="red" v-if="order.status == '待接单'"
            >待接单</van-tag
          >
          <van-tag type="primary" size="large" color="green" v-if="order.status == '待确认'"
            >待确认</van-tag
          >
           <van-tag type="primary" size="large" color="pink" v-if="order.status == '已完成'"
            >已完成</van-tag
          >
        </template>
      </van-card>
    </div>
    <div class="box" style="height: 100px"></div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      swipeData: "",
      orderData: [],
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    //跳转订单详情页面
    toOrderDeatils(orderId) {
      this.$router.push({
        path: "/manager/orederdeatils",
        query: {
          orderId,
        },
      });
    },
    ...mapActions("user", ["getUserInfo"]),
    //轮播图
    async getAllSwipe() {
      let res = await get("/carousel/findAll");
      this.swipeData = res.data.data;
    },
    //查询订单信息
    async getAllOrder() {
      let data = {
        page: 1,
        pageSize: 10,
        employeeId: this.userInfo.id,
      };
      let res = await get("/order/pageQuery", data);
      this.orderData = res.data.data.list;
    },
  },
  created() {
    this.getUserInfo().then(() => {
      this.getAllSwipe();
      this.getAllOrder();
    });
  },
};
</script>

<style scoped>
.background {
  height: 150px;
  background-image: linear-gradient(
    60deg,
    #3d3393 0%,
    #2b76b9 37%,
    #2cacd1 65%,
    #35eb93 100%
  );
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}
.swipe {
  position: relative;
  bottom: 100px;
  height: 120px;
  width: 90%;
  margin-left: 5%;
}
.wz {
  margin-left: 150px;
  position: relative;
  top: 16px;
  font-size: 18px;
}
</style>